<template>
  <view class="progress-container">
    <!-- 灰色背景，代表进度条底色 -->
    <view class="progress-bg">
      <!-- 进度条，宽度由 progressPercent 控制 -->
      <view class="progress-bar" :style="{ width: progressPercent + '%' }"></view>
    </view>
    <!-- 如果需要文字显示，可自行取消注释 -->
    <!-- <text class="progress-text">{{ currentIndex + 1 }}/{{ total }}</text> -->
  </view>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

// 定义组件接收的 props
const props = defineProps<{
  total: number // 总题目数
  currentIndex: number // 当前题目索引（从 0 开始）
}>()

// 计算当前进度的百分比
// (currentIndex + 1) / total * 100
const progressPercent = computed(() => {
  if (props.total <= 0) return 0
  // 确保 currentIndex 不越界
  const safeIndex = Math.min(Math.max(props.currentIndex, 0), props.total - 1)
  return ((safeIndex + 1) / props.total) * 100
})
</script>

<style lang="scss">
.progress-container {
  width: 100%;
  padding: 10rpx;
  box-sizing: border-box;
  position: relative;
}

// 背景条
.progress-bg {
  width: 100%;
  height: 16rpx;
  background-color: #f4f0da;
  border-radius: 8rpx;
  overflow: hidden;
  position: relative;
}

// 已完成进度条
.progress-bar {
  height: 100%;
  background-color: #dbab3e;
  transition: width 0.3s; // 加入动画效果，视需要可去掉
}

// 如果需要显示进度文字，可使用
// .progress-text {
//   position: absolute;
//   top: 20rpx;
//   right: 0;
//   font-size: 14rpx;
//   color: #333;
// }
</style>
